<template>
    <div class="login-container">
        <div class="login-card">
            <div class="login-title">GAME登录</div>
            <el-form size="large" :model="form" :ref="formRef" :rules="rules" label-width="auto">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-button class="full-width" color="#1890ff" @click="submitForm">登录</el-button>
            </el-form>
            <div class="login-footer">
                <div>
                    <span>没有账号？</span>
                    <router-link style="color: #1890ff;" to="/register">注册</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { UserApi } from '@/api/user';
import { useJackpotStore } from '@/store';
import { ElMessage, type ElForm } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const formRef = ref<InstanceType<typeof ElForm>>();
const router = useRouter();
const store = useJackpotStore()

const form = reactive({
    username: '',
    password: ''
});
const rules = reactive({
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

const submitForm = async () => {
    try {
        await formRef.value?.validate();
        const res = await UserApi.login(form);
        if (res.code === 200) {
            ElMessage.success('登录成功');
            store.setToken(res.data.token);
            router.push('/');
        }
    }
    catch (error) {
        ElMessage.error('登录失败，请检查账号和密码');
    }
};
</script>
<style scoped lang='scss'>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            #98FF98 0%,
            #FFB6C1 20%,
            #87CEEB 40%,
            #FFFACD 60%,
            #D8BFD8 80%,
            #98FF98 100%);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(2px);
        z-index: 0;
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-card {
    width: 400px;
    padding: 48px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-align: center;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);

    &:hover {
        transform: translateY(-3px);
        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .login-title {
        color: #1890ff;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 32px;
        letter-spacing: 0.5px;
    }

    .login-footer {
        margin-top: 16px;
        text-align: center;
        font-size: 14px;
        color: #666;
    }
}

@media (max-width: 576px) {
    .login-card {
        width: 100%;
        padding: 24px;
    }
}
</style>
